

import { Button } from 'antd';
import './forms.scss';
import { useFormItemInit } from './hooks';
import { FormItemBaseProps } from './interface';
import React, { ChangeEvent } from 'react';
import { useDrag } from './drop.hooks';
import { Utils } from '../../utils/utils';
import { Components } from '../..';



interface IProps extends FormItemBaseProps {
}
export default function TextareaModal(props: IProps) {
    const { formControl, className = '', style = {} } = props;
    const {
        value, setValue,
        readonly,
        outerClassName,
        layout,
        showError,
        placeholder,
        outerStyle,
        labelStyle,
        selectorStyle,
    } = useFormItemInit(formControl, className, style);

    /** 拖拽排序 */
    const dropRef = React.useRef<HTMLDivElement>(null);
    useDrag({ dropRef, formControl });

    /** 弹窗开关 */
    const [visible, setVisible] = React.useState(false);
    /** 关闭弹窗 */
    const onCloseModal = () => {
        setVisible(false);
    };
    /** 开启弹窗 */
    const onOpenModal = () => {
        setVisible(true);
    };
    /** 确定 */
    const onConfirm = () => {
        setVisible(false);
        setValue(value);
        formControl.setValue(value, 'user');
    };

    const onTextareaChange = (e: ChangeEvent<HTMLTextAreaElement>) => {
        const val = e.target.value;
        let value: any = undefined;
        if (Utils.isString(val)) {
            value = val.replace(/^[\n|\r|\t]+/g, '');
        } else {
            value = val;
        }
        setValue(value);
        formControl.setValue(value);
    };

    return (
        <>
            <div component-name='form-item' className={outerClassName} style={outerStyle} ref={dropRef}>
                <div className={`field ${layout}`}>
                    <Components.forms.FormLabel formControl={formControl} style={labelStyle} />
                    <div className='control'>
                        <div className="value">
                            {
                                readonly ? (
                                    <div onClick={() => onOpenModal()} className='textarea-text readonly' style={selectorStyle}>{value}</div>
                                ) : (
                                    <div onClick={() => onOpenModal()} className='textarea-text' style={selectorStyle}>{value}</div>
                                )
                            }
                        </div>
                    </div>
                </div>
            </div>

            {
                visible && (
                    <Components.ScreenModal
                        title={formControl.label ?? ''}
                        onClose={onCloseModal}
                        width={'98vw'}
                        height={'98vh'}
                        showFullIcon={false}
                        wrapClassName='textarea-modal'
                        headerSlot={<></>}
                        contentSlot={
                            <>
                                {
                                    <textarea
                                        className='textarea-modal-textarea'
                                        value={value}
                                        readOnly={readonly}
                                        onChange={onTextareaChange}></textarea>
                                }
                            </>
                        }
                        footerSlot={<>
                            <div className='footer'>
                                {
                                    readonly ? (
                                        <></>
                                    ) : (
                                        <Button onClick={() => onConfirm()} type="primary" size="middle" block className="btn">确定</Button>
                                    )
                                }
                            </div>
                        </>}
                    />
                )
            }

        </>
    )
}
